// 路由的总文件：路径和组件的对应关系

// 引入依赖
import Vue from 'vue';
import Router from 'vue-router'
Vue.use(Router)

// 引入组件
// import index from '../components/index.vue'
// import hello from '../components/hello.vue'
// import notFound from '../components/notFound.vue'
// import layout from '../components/layout.vue'
// import son1 from '../components/son1.vue'
// import son2 from '../components/son2.vue'
// import son3 from '../components/son3.vue'
// import goodsList from '../components/goodsList.vue'
// import goodsDetail from '../components/goodsDetail.vue'


// 懒加载，页面跳转时才会加载对应的组件，以此提升性能
const index = () => import('../components/index.vue')
const hello = () => import('../components/hello.vue')
const notFound = () => import('../components/notFound.vue')
const layout = () => import('../components/layout.vue')
const son1 = () => import('../components/son1.vue')
const son2 = () => import('../components/son2.vue')
const son3 = () => import('../components/son3.vue')
const goodsList = () => import('../components/goodsList.vue')
const goodsDetail = () => import('../components/goodsDetail.vue')
const login = () => import('../components/login.vue')
const axios = () => import('../components/axios.vue')
const ui = () => import('../components/UI.vue')

const routes = [
  // route是路由对象
  { path: '/index', name: 'aaaa', component: index, meta: { title: 'index' } },
  { path: '/axios', component: axios, meta: { title: 'axios示例' } },
  { path: '/ui', component: ui, meta: { title: 'ui示例' } },
  { 
    path: '/hello',
    component: hello,
    meta: { title: 'hello' },
    // 路由独享守卫
    beforeEnter: (to, from, next)=>{
      console.log(1,to);
      console.log(2,from);
      next()
    }
  },
  { path: '/goodsList', component: goodsList, meta: { title: '商品列表' } },
  { path: '/goodsDetail/:name', component: goodsDetail, meta: { title: '商品详情' } },
  { path: '/login', component: login, meta: { title: '欢迎登陆' } },
  {
    // 嵌套路由的父路由
    path: '/layout',
    component: layout,
    // 嵌套路由的子路由
    children: [
      // path不建议写斜线，如果写了斜线，就要写完整的路径，从头开始，类似/layout/son1
      { path: '', component: son1 }, // 默认的子路由，就是将子路由的地址置空
      { path: 'son2', name: 's2', component: son2 }, // 正常的子路由
      { path: '/layout/son3', component: son3 }, // 完整的路径的子路由
      // {path: '', components: {
      //   a: son1,
      //   b: hello
      // }}, // 默认的子路由，就是将子路由的地址置空
      // {path: 'son2',name: 's2', component: son2}, // 正常的子路由
      // {path: '/layout/son3', component: son3}, // 完整的路径的子路由
    ]
  },
  // 1. 重定向的方法redirect  
  { path: '*', redirect: '/404' },
  { path: '/404', component: notFound },
  // {path: '*', component: notFound}  // 2. 通过*匹配所有的路径（优先级低，放在路由表的最后）

]

// 捕获$router.push()方法导航到当前页面报错的信息
// NavigationDuplicated: Avoided redundant navigation to current location
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const router = new Router({
  // router 是一个全局的路由实例，routes是router的属性
  // 路由模式：history（没有#比较美观），hash（默认）
  mode: 'history',
  // 路由表
  routes,
  // 滚动行为
  scrollBehavior(to, from, savePosition) {
    if(savePosition) {
      return savePosition
    }else {
      return {x: 0, y:0}
    }
  }
})

// 登陆判断
let isLogin = JSON.parse(localStorage.getItem('isLogin')) || false;
// 全局前置导航守卫
router.beforeEach((to, from, next) => {
  // to 是要去的路由对象route。from是正在离开的路由对象route
  document.title = to.meta.title || 'u-shop';
  // 登陆拦截
  if (isLogin) {
    // 将执行权交给下一个中间件
    next()
  } else if (to.path === '/login') {
    next()
  } else {
    next('/login')
  }
})

// 全局解析守卫
router.beforeResolve((to, from, next) => {
  // console.log(222);
  next()
})

// 全局后置守卫
router.afterEach((to, from) => {
  // console.log(333);
})

export default router